<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>GoldenLayout- a multi-window javascript layout manager for webapps</title>
	
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="HTML5, JavaScript, Layout Manager, webapp" />
	<meta name="description" content="GoldenLayout- a multi-window javascript layout manager for webapps" />
	<meta name="author" content="Wolfram Hempel" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="../assets/css/screen.css" />
	
	<link rel="stylesheet" type="text/css" href="../assets/css/api.css" />
	<link rel="stylesheet" type="text/css" href="../assets/css/syntaxhighlighter.css" />
	
	<script type="text/javascript">
	document.createElement( 'header' );
	document.createElement( 'nav' );
	</script>
	<script type="text/javascript" src="../assets/js/jquery.js"></script>
</head>
<body class="category_tutorials">
	<div id="modal" class="loading">
		<div class="background"></div>
		<div class="content-wrapper">
			<div class="head">
				<div class="close"></div>
				<span class="title"></span>
			</div>
			<div class="content"></div>
		</div>
	</div>
	
	<div id="outerWrapper">
		

		
		<div id="nav" class="standalone">
			<div class="start-bg"></div>
			<ul>
				<li ><a href="..">Start</a></li>
				<li ><a href="../download">Download</a></li>
				<li ><a href="../examples">Demos</a></li>
				<li class="active"><a href="../tutorials">Tutorials</a></li>
				<li ><a href="../docs">Docs</a></li>
				<li ><a href="../faq">Faq</a></li>
			</ul>
			<iframe src="https://ghbtns.com/github-btn.html?user=deepstreamIO&repo=golden-layout&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>

		</div>
		
		<div id="wrapper" class="main">
			<ul id="subnav">
	<li class="head first">GoldenLayout</li>
	<li >
		<a href="getting-started.html">Getting Started</a>
	</li>
	<li >
		<a href="getting-started-react.html">Getting Started ReactJS</a>
	</li>
	<li >
		<a href="saving-state.html">Saving State</a>
	</li>
	<li >
		<a href="dynamically-adding-components.html">Adding Items</a>
	</li>
	<li >
		<a href="adding-controls-to-header.html">Header Controls</a>
	</li>
	<li >
		<a href="working-with-popouts.html">Popouts</a>
	</li>
	<li >
		<a href="extending-tabs.html">Extending Tabs</a>
	</li>

	<li class="head">Usage with...</li>
	<li >
		<a href="requirejs.html">RequireJS</a>
	</li>
	<li >
		<a href="angular-simple.html">Angular (simple)</a>
	</li>
	<li >
		<a href="angular-complex.html">Angular (complex)</a>
	</li>
	<li >
		<a href="highcharts.html">HighCharts</a>
	</li>
	<li class="active">
		<a href="slickgrid.html">SlickGrid</a>
	</li>
</ul>
			<div id="content">
				<h1>Using GoldenLayout with SlickGrid</h1><p>This tutorial is in many ways similar to <a href="highcharts.html">Using GoldenLayout with HighCharts and Yahoo Finance</a>. It illustrates how to wire the lifecycle of third-party components up with GoldenLayout.</p><h3>Here&#39;s what we&#39;re after</h3><p><p data-height="268" data-theme-id="7376" data-slug-hash="8a90e7c51e2b8ba6c964e840793d22de" data-default-tab="result" data-user="wolframhempel" class='codepen'>See the Pen <a href='http://codepen.io/wolframhempel/pen/8a90e7c51e2b8ba6c964e840793d22de/'>SlickGrid component</a> by Wolfram Hempel (<a href='http://codepen.io/wolframhempel'>@wolframhempel</a>) on <a href='http://codepen.io'>CodePen</a>.</p></p><script async src="//codepen.io/assets/embed/ei.js"></script>

<h3>A quick note on resizing-behaviour</h3><p>Some of the components you&#39;ll come across resize purely based on CSS. 
Others, like SlickGrid or HighCharts do all sorts of clever things when their size changes and therefor have an <code>onResize</code> or <code>setSize</code> method to notify them. Both of these approaches work perfectly well with GoldenLayout.
There are, however, also the others. Those who need to know about resizing, but assume the only thing that will ever change size is the browser window. (I&#39;m looking at you here, ng-grid). For these components it might make sense to trigger the window resize event programmatically when the container resizes, e.g.</p><pre><code>container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'resize'</span><span class="token punctuation" >,</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span><span class="token punctuation" >{</span>
    $<span class="token punctuation" >(</span>window<span class="token punctuation" >)</span><span class="token punctuation" >.</span><span class="token function" >trigger<span class="token punctuation" >(</span></span> <span class="token string" >'resize'</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><h3>A few things to look out for</h3><h4>Defered grid creation</h4><p>In order to determine its initial size, SlickGrid measures the component that it is inserted to. When GoldenLayout creates the Component however it is not yet inserted into the DOM. The size of the element returned by <code>container.getElement()</code> is therefor zero. So rather than creating the Grid straight away we&#39;ll wait for the container&#39;s <code>open</code> event - at which point it&#39;s inserted into the DOM and ready to go.</p><pre><code><span class="token keyword" >var</span> StockGridComponent <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span> container<span class="token punctuation" >,</span> state <span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span>
    container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'open'</span><span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_createGrid<span class="token punctuation" >,</span> <span class="token keyword" >this</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
</code></pre><h4>Binding events only after the component has been created</h4><p>There’s no guarantee that your component won’t be resized or destroyed before <code>open</code> is called. So subscribe to events that expect the component to be there only after its been created.</p><pre><code>StockGridComponent<span class="token punctuation" >.</span>prototype<span class="token punctuation" >.</span>_createGrid <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_grid <span class="token operator" >=</span> <span class="token keyword" >new</span> <span class="token class-name" >Slick<span class="token punctuation" >.</span>Grid</span><span class="token punctuation" >(</span> 
        <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >getElement<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >,</span>
        <span class="token keyword" >this</span><span class="token punctuation" >.</span>_stockDataProvider<span class="token punctuation" >.</span><span class="token function" >getStocksBySymbol<span class="token punctuation" >(</span></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_state<span class="token punctuation" >.</span>symbols <span class="token punctuation" >)</span><span class="token punctuation" >,</span> 
        <span class="token keyword" >this</span><span class="token punctuation" >.</span>_columns<span class="token punctuation" >,</span>
        <span class="token keyword" >this</span><span class="token punctuation" >.</span>_options
    <span class="token punctuation" >)</span><span class="token punctuation" >;</span>

    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'resize'</span><span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_resize<span class="token punctuation" >,</span> <span class="token keyword" >this</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'destroy'</span><span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_destroy<span class="token punctuation" >,</span> <span class="token keyword" >this</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >_resize<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
</code></pre><h4>Destruction</h4><p>Always include some clean-up logic to prevent memory leaks and keep your application running smoothly for days.</p><pre><code>StockGridComponent<span class="token punctuation" >.</span>prototype<span class="token punctuation" >.</span>_destroy <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_grid<span class="token punctuation" >.</span><span class="token function" >destroy<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
</code></pre><h3>Putting it all together</h3><p>This is what our SlickGrid component would look like. It uses an external <code>DataProvider</code> to get its data and is populated by a list of stock-ticker symbols provided from the state.</p><pre><code><span class="token keyword" >var</span> StockGridComponent <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span> container<span class="token punctuation" >,</span> state <span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container <span class="token operator" >=</span> container<span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_state <span class="token operator" >=</span> state<span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_grid <span class="token operator" >=</span> <span class="token keyword" >null</span><span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_stockDataProvider <span class="token operator" >=</span> <span class="token keyword" >new</span> <span class="token class-name" >StockDataProvider</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_columns <span class="token operator" >=</span> <span class="token punctuation" >[</span>
        <span class="token punctuation" >{</span>id<span class="token punctuation" >:</span> <span class="token string" >"symbol"</span><span class="token punctuation" >,</span> name<span class="token punctuation" >:</span> <span class="token string" >"Symbol"</span><span class="token punctuation" >,</span> field<span class="token punctuation" >:</span> <span class="token string" >"symbol"</span><span class="token punctuation" >}</span><span class="token punctuation" >,</span>
        <span class="token punctuation" >{</span>id<span class="token punctuation" >:</span> <span class="token string" >"company"</span><span class="token punctuation" >,</span> name<span class="token punctuation" >:</span> <span class="token string" >"Company"</span><span class="token punctuation" >,</span> field<span class="token punctuation" >:</span> <span class="token string" >"company"</span><span class="token punctuation" >}</span><span class="token punctuation" >,</span>
        <span class="token punctuation" >{</span>id<span class="token punctuation" >:</span> <span class="token string" >"price"</span><span class="token punctuation" >,</span> name<span class="token punctuation" >:</span> <span class="token string" >"Price"</span><span class="token punctuation" >,</span> field<span class="token punctuation" >:</span> <span class="token string" >"price"</span><span class="token punctuation" >}</span><span class="token punctuation" >,</span>
        <span class="token punctuation" >{</span>id<span class="token punctuation" >:</span> <span class="token string" >"change"</span><span class="token punctuation" >,</span> name<span class="token punctuation" >:</span> <span class="token string" >"Change"</span><span class="token punctuation" >,</span> field<span class="token punctuation" >:</span> <span class="token string" >"change"</span><span class="token punctuation" >}</span><span class="token punctuation" >,</span>
        <span class="token punctuation" >{</span>id<span class="token punctuation" >:</span> <span class="token string" >"changeRel"</span><span class="token punctuation" >,</span> name<span class="token punctuation" >:</span> <span class="token string" >"Change %"</span><span class="token punctuation" >,</span> field<span class="token punctuation" >:</span> <span class="token string" >"changeRel"</span><span class="token punctuation" >}</span><span class="token punctuation" >,</span>
        <span class="token punctuation" >{</span>id<span class="token punctuation" >:</span> <span class="token string" >"volume"</span><span class="token punctuation" >,</span> name<span class="token punctuation" >:</span> <span class="token string" >"Volume"</span><span class="token punctuation" >,</span> field<span class="token punctuation" >:</span> <span class="token string" >"volume"</span><span class="token punctuation" >}</span>
    <span class="token punctuation" >]</span><span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_options <span class="token operator" >=</span> <span class="token punctuation" >{</span>
        editable<span class="token punctuation" >:</span> <span class="token keyword" >false</span><span class="token punctuation" >,</span>
        enableAddRow<span class="token punctuation" >:</span> <span class="token keyword" >false</span><span class="token punctuation" >,</span>
        enableCellNavigation<span class="token punctuation" >:</span> <span class="token keyword" >true</span>
    <span class="token punctuation" >}</span><span class="token punctuation" >;</span>

    container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'open'</span><span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_createGrid<span class="token punctuation" >,</span> <span class="token keyword" >this</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>

StockGridComponent<span class="token punctuation" >.</span>prototype<span class="token punctuation" >.</span>_createGrid <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_grid <span class="token operator" >=</span> <span class="token keyword" >new</span> <span class="token class-name" >Slick<span class="token punctuation" >.</span>Grid</span><span class="token punctuation" >(</span> 
        <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >getElement<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >,</span>
        <span class="token keyword" >this</span><span class="token punctuation" >.</span>_stockDataProvider<span class="token punctuation" >.</span><span class="token function" >getStocksBySymbol<span class="token punctuation" >(</span></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_state<span class="token punctuation" >.</span>symbols <span class="token punctuation" >)</span><span class="token punctuation" >,</span> 
        <span class="token keyword" >this</span><span class="token punctuation" >.</span>_columns<span class="token punctuation" >,</span>
        <span class="token keyword" >this</span><span class="token punctuation" >.</span>_options
    <span class="token punctuation" >)</span><span class="token punctuation" >;</span>

    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'resize'</span><span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_resize<span class="token punctuation" >,</span> <span class="token keyword" >this</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'destroy'</span><span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_destroy<span class="token punctuation" >,</span> <span class="token keyword" >this</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >_resize<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>


StockGridComponent<span class="token punctuation" >.</span>prototype<span class="token punctuation" >.</span>_resize <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_grid<span class="token punctuation" >.</span><span class="token function" >resizeCanvas<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_grid<span class="token punctuation" >.</span><span class="token function" >autosizeColumns<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>

StockGridComponent<span class="token punctuation" >.</span>prototype<span class="token punctuation" >.</span>_destroy <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_grid<span class="token punctuation" >.</span><span class="token function" >destroy<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
</code></pre>
				
				<h3>Comments and Questions</h3>
				<div id="disqusContainer">
					<div id="disqus_thread"></div>
				    <script type="text/javascript">
				        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
				        var disqus_shortname = 'goldenlayoutcom'; // required: replace example with your forum shortname

				        /* * * DON'T EDIT BELOW THIS LINE * * */
				        (function() {
				            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
				            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
				            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
				        })();
				    </script>
				    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
				    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
			    
					
					
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../assets/js/docs.js"></script>
		
		<div id="footerPush"></div>
	</div>
	<div id="footer">
		<div class="footer-content">
			<div class="copyright">&copy;<span class="year"></span> deepstreamHub GmbH</div>
			<script type="text/javascript">
			$('.year').html( (new Date()).getFullYear() );
			</script>
			<ul class="footerItems">
				<li>
					<a href="https://github.com/deepstreamIO/golden-layout">Github</a>
					<a href="https://www.npmjs.com/package/golden-layout">NPM</a>
					<div>bower/npm: <code>'golden-layout'</code></div>
				</li>
				<li>
					<div>deepstreamHub GmbH</div>
					<div>Lindenstrasse 20-25</div>
					<div>10969 Berlin</div>
				</li>
				<li>
					<a href="mailto:info@deepstreamhub.com">info@deepstreamhub.com</a>
					<a href="https://deepstreamhub.com/">deepstreamHub.com</a><br />
					<a href="https://twitter.com/wolframhempel">by @wolframhempel</a>

				</li>
			</ul>
		</div>
	</div>

	<script type="text/javascript" src="../assets/js/Modal.js"></script>
	
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-63583386-5', 'auto');
	  ga('send', 'pageview');

	</script>
	
</body>
</html>